<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-date"></i> 首页</el-breadcrumb-item>
        <el-breadcrumb-item>企业热点</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form style="margin: 15px;" :model="article" :rules="rules" ref="article" label-width="100px"
             class="demo-ruleForm">
      <el-form-item>
        <el-button style="float: left;margin: 5px;" type="danger" class="handle-del mr10" size="small" round icon="el-icon-back"
                   @click="routerBack" plain>返回
        </el-button>
      </el-form-item>
      <el-form-item label="标题" prop="articletitle">
        <el-input v-model="article.articletitle"></el-input>
      </el-form-item>
      <el-form-item label="文章类型">
        <el-select size="small" style="width: 100%" v-model="article.typeid" placeholder="文章类型">
          <el-option
            v-for="item in searchDic"
            :key="item.id"
            :label="item.dicname"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="排序" prop="odr">
        <el-input v-model.number="article.odr"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="article.remark" type="textarea" :rows="3"></el-input>
      </el-form-item>
      <!--<el-form-item label="图片">
          <el-upload
              class="upload-demo"
              action="http://127.0.0.1:8088/lcot/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :file-list="fileList"
              name="image"
              list-type="picture-card">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
      </el-form-item>-->
      <el-form-item label="内容" prop="content">
        <quill-editor ref="myTextEditor" v-model="article.content" :config="editorOption"></quill-editor>
        <el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import common from '../../../common/constant.js'
  import {quillEditor} from 'vue-quill-editor';
  import ElFormItem from '../../../../node_modules/element-ui/packages/form/src/form-item';
  export default {
    data: function () {
      const current = 1
      return {
        article: {
          id: 0,
          articletitle: null,
          createtime: null,
          typeid: null,
          odr: '',
          deleted: 0,
          remark: null,
          content: null
        },
        fileList: [],
        editorOption: {
          // something config
        },
        rules: {
          articletitle: [
            {required: true, message: '请输入文章标题', trigger: 'blur'},
            {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
          ],
          typeid: [
            {required: true, message: '请输入新闻标题', trigger: 'blur'},
          ],
          content: [
            {required: true, message: '请填写文章内容', trigger: 'change'}
          ],
        },
        searchDic: [{
          id: 0,
          dicname: ''
        }],
        page: {
          pageSize: 50,
          currentPage: current,
          total: 0,
          list: []
        }
      }
    },
    components: {
      ElFormItem,
      quillEditor
    },
    created: function () {
      this.queryDic()
      this.initData(this.$route.query.articleId)
    },
    methods: {
      routerBack(){
        this.$router.back()
      },
      onEditorChange({editor, html, text}) {
        this.content = html;
      },
      queryDic(){
        let self = this
        self.$http.post('/api/dict', {
          'pageSize': self.page.pageSize,
          'pageNum': self.page.currentPage,
        })
          .then((response) => {
            let responseData = response.data
            if (responseData.flag === common.respons.seccuss) {
              self.searchDic = responseData.pageData.list
            } else {
              self.message_error('查询字典失败！^_^;')
            }
          })
          .catch(function (response) {
            self.message_error('查询字典异常！^_^;')
          })
      },
      initData(newID){
        let self = this
        self.$http.post('/api/article', {
          'id': newID,
          'pageSize': self.page.pageSize,
          'pageNum': self.currentPageNum,
        })
          .then(function (response) {
            let responseData = response.data
            console.log(responseData)
            if (responseData.flag === common.respons.seccuss) {
              self.article = responseData.pageData.list[0]
              self.article.typeid=parseInt(self.article.typeid)
            } else {
              self.message_error()
            }
          })
          .catch(function (error) {
            self.message_error('查询出错')
          });
      },
      submit(){
        let self = this
        self.$refs['article'].validate((valid) => {
          if (valid) {
            self.$http.post('/api/article/save', self.article)
              .then(function (response) {
                let responseData = response.data
                if (responseData.flag === common.respons.seccuss) {
                  self.message_ok('修改文章成功！^_^')
                  self.$router.push({path: '/new'})
                } else {
                  self.message_error('修改文章失败！^_^;')
                }
              })
              .catch(function (error) {
                self.message_ok('修改文章异常！^_^;')
              });
          } else {
            return false
          }
        })

      },
      message_error(message) {
        if (message === null) {
          this.$notify.error({
            title: '错误',
            message: '操作失败'
          });
        } else {
          this.$notify.error({
            title: '错误',
            message: message
          });
        }
      },
      message_ok(message) {
        if (message === null) {
          this.$notify({
            title: '成功',
            message: '操作成功',
            type: 'success'
          });
        } else {
          this.$notify({
            title: '成功',
            message: message,
            type: 'success'
          });
        }

      }
    },
    computed: {
      editor() {
        return this.$refs.myTextEditor.quillEditor;
      }
    }
  }
</script>
<style scoped>
  .editor-btn {
    margin-top: 20px;
  }
</style>
